<template>
  <div
    class="fan-input d-flex a-center"
    @dblclick="spanClick"
    :style="{
      color: (elementData && elementData.color) || 'red',
      left: (cloneObj.x && cloneObj.x.value) + 'px !important',
      top: (cloneObj.y && cloneObj.y.value) + 'px',
      width: (cloneObj.width && cloneObj.width.value) + 'px',
      height: (cloneObj.height && cloneObj.height.value) + 'px',
      fontSize: (cloneObj.fontSize && cloneObj.fontSize.value) + 'px',
      letterSpacing:
        (cloneObj.letterSpacing && cloneObj.letterSpacing.value) + 'px',
      lineHeight: (cloneObj.lineHeight && cloneObj.lineHeight.value) + 'px',
      fontFamily: formatterFontFamily(
        cloneObj.fontFamily && cloneObj.fontFamily.value
      ),
    }"
  >
    <span class="title" ref="title" v-if="isShowLabel">{{
      elementData.value
    }}</span>
    <Input
      ref="focus"
      @on-blur="blur"
      v-model="value"
      v-if="!isShowLabel"
    ></Input>
  </div>
</template>

<script>
import Draggabilly from "Draggabilly";
export default {
  name: "fan-input",
  props: {
    // 数据参数
    elementData: {
      type: Object,
      default: () => {},
    },
    // index序列
    index: {
      default: () => "",
    },
    // 激活的index
    acIndex: {
      default: () => "",
    },
    // 是否显示label
    isShowLabel: {
      default: () => true,
    },
    // 是否聚焦
    isFocus: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {
      draggabilly: null,
      value: "",
      filterObj: {},
      cloneObj: {},
    };
  },
  watch: {
    // 监听激活
    acIndex: {
      handler(nval) {
        if (nval === this.index) {
          // 激活则启用拖拽
          this.enable();
        } else {
          // 失去激活 取消拖拽
          this.disable();
        }
      },
    },
    elementData: {
      handler(nval) {
        // 组件属性中的input 只要聚焦 即便属性值发生变化 也不做操作（移动等）
        if (nval.isFocus === true) {
          return;
        }
        if (nval?.value) {
          this.value = nval.value;
        }
        // 过滤属性
        this.filterField();
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // 初始化拖拽
    this.initDrag();
  },

  methods: {
    // 过滤字体
    formatterFontFamily(type) {
      return type == 0 ? "微软雅黑, SimSun, serif" : "宋体";
    },
    // 过滤属性
    filterField() {
      this.elementData.options.forEach((it) => {
        it.children.forEach((el) => {
          this.filterObj[el.drop] = el;
        });
      });
      // 计算宽/高
      this.calculator();
      // 克隆
      this.cloneObj = this.$_.cloneDeep(this.filterObj);
    },
    calculator() {
      this.$nextTick(function () {
        var innerHeight = this.$refs?.title?.getBoundingClientRect().height;
        // 只有当现在元素高度小于内元素高度，此时再给元素高度设置为内元素高度
        if (this.filterObj["height"].value < innerHeight)
          this.filterObj["height"].value = innerHeight;
      });
    },
    // 初始化拖拽
    initDrag() {
      // console.log(this.$el.offsetParent, "...el");
      this.draggabilly = new Draggabilly(this.$el, {
        // options...
        containment: ".center-drag",
      });
      // 默认禁止
      this.disable();
      // 监听移动
      this.triggerMove();
    },
    // 监听移动
    triggerMove() {
      this.draggabilly.on("dragEnd", (event, pointer, moveVector) => {
        this.filterObj["x"].value = this.$el.offsetLeft;
        this.filterObj["y"].value = this.$el.offsetTop;

        this.filterField();
      });
    },
    // 开启拖拽
    enable() {
      this.draggabilly.enable();
    },
    // 禁止
    disable() {
      this.draggabilly.disable();
    },
    // 开启输入
    spanClick() {
      this.$emit("update:isShowLabel", false);
      this.$nextTick(function () {
        this.$refs.focus.focus();
      });
    },
    // 失焦
    blur() {
      // 关闭输入
      this.$emit("update:isShowLabel", true);
      // 推出新值
      this.$emit("update:value", this.value);
    },
  },
};
</script>

<style lang="scss" scoped>
.fan-input ::v-deep {
  cursor: pointer;
  position: absolute;
  word-wrap: break-word;
  border: 1px solid transparent;
}
</style>
